<!DOCTYPE html>
<html>
<head>
    <title>健康档案详情</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul{list-style-type: none;}
        #healtharchive{width: 100%;background-color:rgb(248,248,248);}
        /*header*/
        #healtharchive-header{width: 100%;height: 34vw;background-color: rgb(99,173,247);}
        h1{color: white;font-size: 4.8vw;font-weight: 100;text-align: center;padding-top: 5vw;}
        #healtharchive-header p{color: white;font-weight: 100;font-size: 3.2vw; margin-top: 3vw;}
        #healtharchive-header p:first-of-type{float: left;margin-left: 8vw;}
        #healtharchive-header p:last-of-type{float: right;margin-right: 8vw;}
        /*悬浮块*/
        #healtharchive-float{width: 92%;height: 30vw;background-color: white;border-radius: 1.3vw;box-shadow: 0 3px 5px rgba(99,173,247,0.3);position: absolute;z-index: 100;left: 4%;top: 23.5vw;}
        #healtharchive-float .patient-info{height:13.3vw;margin-top:3.2vw}
        #healtharchive-float .patient-ico{width: 13.3vw;height: 13.3vw;margin-left:4vw;float: left;background: url(sh-health-report.png);background-size: 13.3vw;float:left}
        #healtharchive-float .patient-info .patient-name{margin-left:3.7vw;font-size:4.5vw;line-height:13.3vw;font-weight:300;color:rgb(51,51,51);float:left}
        #healtharchive-float .patient-info .patient-birthday{float:right;margin-right:4vw;vertical-align: middle}
        #healtharchive-float .patient-birthday-ico{width:5.3vw;height:5.3vw;margin-right:2vw;margin-top:4vw;float: left;background-color: white}
        #healtharchive-float .patient-birthday-data{font-size:4.5vw;font-weight:300;color:rgb(51,51,51);float: left;line-height:13.3vw;padding:0px}
        #healtharchive-float div:nth-child(2){width: 100%;height: 1px;float: left;background-color: rgb(216,216,216);margin-top: 3.2vw;}
        #healtharchive-float .reporter{width: 100%;height: 4vw;line-height: 4vw;float: left;margin-top: 3.2vw; font-size: 4vw;font-weight: 200;color: rgb(83,83,83);padding-left: 4vw;}
        /*底部两块内容*/
        #healtharchive-content,#healtharchive-content1{width:100%;padding-top:26vw;padding-bottom:2vw;background-color: white;}
        #healtharchive-content1{padding-top: 4vw;margin-top: 4vw;}
        /*content header*/
        .healtharchive-content-header{width: 100%;height: 4.5vw;font-size: 4.5vw;line-height: 4.5vw;margin-bottom: 4vw;}
        .healtharchive-content-header div{width: 1vw; height: 4.3vw;float: left;background-color: white;border-radius: 1vw; margin-left: 4vw;background: linear-gradient(rgb(152,200,255),rgb(86,156,243));}
        .healtharchive-content-header p{margin-left: 2.9vw;float: left;color: rgb(51,51,51);}
        /*content bg*/
        .healtharchive-report{width: 92%;margin:0 auto 4vw auto;background-color: rgb(246,247,251);padding: 3.2vw 4vw;box-sizing: border-box;}
        /*第一部分*/
        .healtharchive-report div{width: 4.2vw;height: 4.2vw;padding: 0;margin-left: 0;float: left;background: url(sh-health-tips.png);background-size: 4.2vw;}
        .healtharchive-report p:first-of-type{color: rgb(38,38,38);float: left;margin-left: 2vw;font-size: 4.2vw;line-height: 4.2vw;}
        .healtharchive-report p:last-of-type{width: 84vw;margin-left: auto;margin-right: auto;padding-top: 2.6vw; line-height: 150%;color: rgb(102,102,102);clear: both;font-size: 4vw;font-weight: 200;}

        /*第二部分 提交的材料*/
        .healtharchive-report1{width: 92%;margin:0 auto 4vw auto;background-color: rgb(246,247,251);padding: 3.2vw 4vw;box-sizing: border-box;}

        /*问 答*/
        .healtharchive-report1 div div{background-color: rgb(99,173,247);width: 4.2vw;height: 4.2vw;font-size: 2.9vw;line-height: 4.2vw;color: white;font-weight: 200;text-align: center;border-radius: 0.8vw;margin-top: 0.8vw;float: left;}
        /*文字描述*/
        .healtharchive-report1 div p{margin-left: 5.8vw;line-height: 5.3vw;color: rgb(102,102,102);font-size: 3.73vw;font-weight: 200;}

        #healtharchive-bottom{margin-left: 4vw;margin-right: 4vw;margin-bottom:4vw;width: 92vw;font-size: 3.73vw;font-weight: 200;line-height: 9.3vw}

        @media screen and (min-width:1025px){

        }
    </style>

    <script type="text/javascript">
        function toConversation(){
            console.info("toConversation");
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
            if (isAndroid)
            {
                window.healthrecord.toConversation(null);
            }else
            {
                window.webkit.messageHandlers.toConversation.postMessage(null);
            }

        }
    </script>

</head>
<body>
<div id="healtharchive">
    <div id="healtharchive-header">
        <h1> ${goodsDataUser.itemName}</h1>
        <p>咨询日期：${goodsDataUser.createDate?string("yyyy-MM-dd")}</p>
        <p>报告日期：${goodsDataUser.updateDate?string("yyyy-MM-dd")}</p>
    </div>
    <div id="healtharchive-float">
        <div class="patient-info">
            <div class="patient-ico"></div>
            <p class="patient-name">${goodsDataUser.patientList.patientName}</p>
            <div class="patient-birthday"><img class="patient-birthday-ico" src="sh-health-birth.png"/><h1 class="patient-birthday-data">${goodsDataUser.patientList.birthdayDate?string("yyyy-MM-dd")}</h1></div>
        </div>
        <div></div>
        <p class="reporter">健康报告医生： ${goodsDataUser.accepterName}</p>
    </div>

    <div id="healtharchive-content">
        <div class="healtharchive-content-header">
            <div></div>
            <p>医生报告</p>
        </div>
        <ul>
        <#list goodsDataStuffRemarkList as goodsDataStuffRemark>
            <li class="healtharchive-report">
                <div></div>
                <p>${goodsDataStuffRemark.subTitle}：</p>
                <p>${goodsDataStuffRemark.subDesc}</p>
            </li>
        </#list>

        </ul>
    </div>

    <div id="healtharchive-content1">
        <div class="healtharchive-content-header">
            <div></div>
            <p>提交的材料</p>
        </div>
        <ul>
        <#list goodsDataUserRemarkList as goodsDataUserRemark>
            <li class="healtharchive-report1">
                <div style="margin-bottom: 2.5vw;">
                    <div >问</div>
                    <p>${goodsDataUserRemark.question}</p>
                </div>
                <div>
                    <div style="background-color: rgb(145,167,255);">答</div>
                    <p>${goodsDataUserRemark.answer}</p>
                </div>
            </li>
        </#list>
        </ul>
    </div>

    <div id="healtharchive-bottom">
        <a href="javascript:toConversation()" style="float: left;color: #63adf7;text-decoration:underline">咨询医生</a>
        <div style="width: 21.3vw;height: 9.3vw; background: url(sh-health-logo.png) no-repeat;background-size: 21.3vw 9.3vw;background-color: white;float: right;"></div>
    </div>



</div>

</body>
</html>